<template>
  <div class="page-wrapper app-container">
    <div class="page-header">
      <slot name="header"></slot>
    </div>
    <div class="page-content">
      <slot name="content"></slot>
    </div>
    <template class="page-footer">
      <slot name="footer"></slot>
    </template>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "list-wrapper",
};
</script>

<style scoped>
.page-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
}

.page-wrapper .page-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}
</style>
